<template>
  <div>
    <Layout>
      <!-- Page Header-->
      <header
        class="masthead"
        style="background-image: url('/img/home-bg.jpg')"
      >
        <div class="container position-relative px-4 px-lg-5">
          <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
              <div class="site-heading">
                <h1>Clean Blog</h1>
                <span class="subheading">A Blog Theme by Start Bootstrap</span>
              </div>
            </div>
          </div>
        </div>
      </header>
      <!-- Main Content-->
      <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
          <div class="col-md-10 col-lg-8 col-xl-7">
            <!-- Post preview-->
            <div class="post-preview">
              <g-link class="nav-link px-lg-3 py-3 py-lg-4" to="/post/1">
              <!-- <a href="post.html"> -->
                <h2 class="post-title">
                  Man must explore, and this is exploration at its greatest
                </h2>
                <h3 class="post-subtitle">
                  Problems look mighty small from 150 miles up
                </h3>
              <!-- </a> -->
              </g-link>
              <p class="post-meta">
                Posted by
                <a href="#!">Start Bootstrap</a>
                on September 24, 2022
              </p>
            </div>
            <!-- Divider-->
            <hr class="my-4" />
          </div>
        </div>
      </div>
    </Layout>
  </div>
</template>

<page-query>

</page-query>
<script>
export default {
  metaInfo: {
    title: 'Hello, world!'
  }
}
</script>

<style>
.home-links a {
  margin-right: 1rem;
}
</style>
